<!-- 单选框 -->
<script id="tpl-radio4form" type="text/html">
    {{if item.buttonGroup}}
    <div data-toggle="buttons" class="btn-group">
        {{each item.options it i}}
        <label class="btn btn-primary">
            <input name="{{item.name}}" type="{{item.type||radio}}" class="ace {{item.className}}" value="{{it.value}}"{{if item.value===it.value}} checked{{/if}}{{if item.required}} required{{/if}}/>
            {{it.label}}
        </label>
        {{/each}}
    </div>
    {{else}}
    <div>
        {{each item.options it i}}
        {{if i>0}} &nbsp; &nbsp; &nbsp;{{/if}}
        <label class="inline">
            <input name="{{item.name}}" type="{{item.type||radio}}" class="ace {{item.className}}" value="{{it.value}}"{{if item.value===it.value}} checked{{/if}}{{if item.required}} required{{/if}}/>
            <span class="lbl middle">{{it.label}}</span>
        </label>
        {{/each}}
    </div>
    {{/if}}
</script>
<!-- 多选框 -->
<script id="tpl-checkbox4form" type="text/html">
    <%include("tpl-radio4form")%>
</script>
<!-- switch开关 -->
<script id="tpl-switch4form" type="text/html">
    <label class="inline">
        <input type="checkbox" name="{{item.name}}" id="txt{{item.name}}" class="ace ace-switch {{item.className}}{{if item.readonly}} disabled{{/if}}" value="{{item.checkedValue}}" {{if item.checkedValue===item.value || (typeof item.value === 'undefined' && item.defaultChecked)}}checked{{/if}}{{if item.required}} required{{/if}}{{if item.disabled}} disabled{{/if}}>
        <span class="lbl middle"{{if item.lbl}} data-lbl="{{if typeof item.lbl === 'string'}}{{item.lbl}}{{else}}{{item.lbl[0]}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.lbl[1]}}{{/if}}"{{/if}}></span>
    </label>
</script>
<!-- number -->
<script id="tpl-number4form" type="text/html">
    <input type="text" id="txt{{item.name}}" name="{{item.name}}" class="js-spinner {{item.className}}"{{if item.min}} min="{{item.min}}"{{/if}}{{if item.max}} max="{{item.max}}"{{/if}}{{if item.step}} step="{{item.step}}"{{/if}} value="{{item.value}}"{{if item.required}} required{{/if}}{{if item.disabled}} disabled{{/if}}{{if item.readonly}} readonly{{/if}}/>
</script>
<!-- 输入框 -->
<script id="tpl-input4form" type="text/html">
    <div class="clearfix">
        {{if item.suffix || item.prefix}}
        <!-- 带图标输入框 -->
        <span class="input-icon {{if item.suffix}}input-icon-right{{/if}}">
            {{if item.prefix}}<i class="ace-icon {{item.prefix}}"></i>{{/if}}
            <input class="{{if item.size}}input-{{item.size}}{{/if}} {{item.className}}"{{if item.style}} style="{{item.style}}"{{/if}} {{if item.inputMask}}data-inputmask="{{item.inputMask}}" {{/if}}type="{{item.subType||'text'}}" id="txt{{item.name}}" name="{{item.name}}" placeholder="{{item.placeholder}}" value="{{item.value}}" autocomplete="off"{{if item.required}} required{{/if}}{{if item.disabled}} disabled{{/if}}{{if item.readonly}} readonly{{/if}}>
            {{if item.suffix}}<i class="ace-icon {{item.suffix}}"></i>{{/if}}
        </span>
        {{else if item.addonBefore || item.addonAfter}}
            <div class="input-group">
                {{if item.addonBefore}}
                <span class="input-group-addon">
                {{if item.addonBefore.indexOf('fa') !== -1 || item.addonBefore.indexOf('glyphicon') !== -1}}
                    <i class="ace-icon {{item.addonBefore}}"></i>
                {{else}}
                    {{item.addonBefore}}
                {{/if}}
                </span>
                {{/if}}
                <input class="{{if item.size}}input-{{item.size}}{{/if}} {{item.className}}"{{if item.style}} style="{{item.style}}"{{/if}} {{if item.inputMask}}data-inputmask="{{item.inputMask}}" {{/if}}type="{{item.subType||'text'}}" id="txt{{item.name}}" name="{{item.name}}" placeholder="{{item.placeholder}}"  value="{{item.value}}" autocomplete="off"{{if item.required}} required{{/if}}{{if item.disabled}} disabled{{/if}}{{if item.readonly}} readonly{{/if}}>
                {{if item.addonAfter}}
                <span class="input-group-addon">
                {{if item.addonAfter.indexOf('fa') !== -1 || item.addonAfter.indexOf('glyphicon') !== -1}}
                    <i class="ace-icon {{item.addonAfter}}"></i>
                {{else}}
                    {{item.addonAfter}}
                {{/if}}
                </span>
                {{/if}}
            </div>
        {{else}}
        <!-- 普通输入框 -->
        <input type="{{item.subType||'text'}}" id="txt{{item.name}}" name="{{item.name}}" placeholder="{{item.placeholder}}" {{if item.maxlength}}maxlength="{{item.maxlength}}"{{/if}} class="col-xs-10 col-sm-8{{if item.size}} input-{{item.size}}{{/if}} {{item.className}}"{{if item.style}} style="{{item.style}}"{{/if}} {{if item.inputMask}}data-inputmask="{{item.inputMask}}" {{/if}} value="{{item.value}}" autocomplete="off"{{if item.required}} required{{/if}}{{if item.disabled}} disabled{{/if}}{{if item.readonly}} readonly{{/if}}/>
        {{/if}}
    </div>
</script>
<!-- 文件上传框 -->
<script id="tpl-upload4form" type="text/html">
    <% item.options = _.merge({ style: item.multiple ? "well" : undefined }, item.options) %>
    <input type="file" id="txt{{item.name}}" name="{{item.name}}" class="{{item.className}}" {{item.multiple ? "multiple" : ""}} {{item.required ? "required" : ""}} {{each item.options val attr}}data-{{attr}}="{{val}}"{{/each}} style="min-height: 100px;"/>
</script>
<!-- 文本域 -->
<script id="tpl-textarea4form" type="text/html">
    <div class="clearfix">
    <textarea class="form-control{{if item.maxLength}} limited{{/if}}{{if item.autosize}} autosize{{/if}} {{item.className}}" id="txt{{item.name}}" name="{{item.name}}" {{if item.maxLength}}maxlength="{{item.maxLength}}"{{/if}} placeholder="{{item.placeholder}}"{{if item.required}} required{{/if}}{{if item.props}} {{item.props}} {{/if}}>{{item.value}}</textarea>
    </div>
</script>
<!-- 下拉框 -->
<script id="tpl-option4form" type="text/html">
    <% var _optionValue = _.isArray(options) ? value[item.valueProp] : (item.valueProp === 'value' ? value : key),
        _optionLabel = _.isArray(options) ? value[item.labelProp] : (item.labelProp === 'label' ? key : value),
        _itemValue = defaults(item.value, _.result(data, item.name), (value.defaultValue ? _optionValue : undefined), item.defaultValue);
    %>
    <option value="{{_optionValue}}" {{(multiple ? (_itemValue && _itemValue.indexOf(_optionValue) !== -1): _itemValue===_optionValue) ? "selected" : ""}} {{value.disabled ? "disabled" : ""}}>{{_optionLabel}}</option>
</script>
<script id="tpl-select4form" type="text/html">
    <div class="">
    <% item = _.extend({
        emptyText: "请选择",
        valueProp: _.isArray(item.options) ? "value" : "label",
        labelProp: _.isArray(item.options) ? "label" : "value"
    }, item, { chosen: item.multiple || (item.className && item.className.split(" ").indexOf("chosen-select") !== -1) }); %>
        <select {{item.multiple ? "multiple" : ""}} data-placeholder="{{item.emptyText}}" class="{{item.chosen ? "chosen-select" : ""}} form-control {{item.className}}" id="select{{item.name}}" name="{{item.name}}"{{if item.required}} required{{/if}}{{if item.settings}} data-options='{{JSON.stringify(item.settings)}}'{{/if}}>
        {{if !item.chosen &&item.hasEmpty}}<option value="">{{item.emptyText}}</option>{{/if}}
        {{if item.chosen && !item.multiple}}<option value=""></option>{{/if}}
        {{each item.options it i}}
            {{if it.group}}
            <optgroup label="{{it.label}}">
                {{each it.value groupOption j}}
                <%include('tpl-option4form',{"item": item, "options": it.value, "key": j, "value": groupOption, "multiple": item.multiple})%>
                {{/each}}
            </optgroup>
            {{else}}
            <%include('tpl-option4form',{"item": item, "options": item.options, "key": i, "value": it, "multiple": item.multiple})%>
            {{/if}}
        {{/each}}
        </select>
    </div>
</script>
<!-- 自定义html -->
<script id="tpl-custom4form" type="text/html">
    <%
        item.children = item.children || [];
        var _data = {
            item: item,
            data: data,
            slot: {}
        };
        for (var i = 0; i < item.children.length; i++) {
            var childItem = item.children[i];
            var key = childItem.slot || childItem.name || i;
            _data.slot[key] = template("tpl-formItem", _.assign({}, $data, { item: childItem, i: i }));
        }
    %>
    {{@template.render(item.html, _data)}}
</script>
<!-- 表单模版 -->
<script id="tpl-formItem" type="text/html">
    <% data = data || {}; %>
    {{if item.type === 'custom'}}
    <%include('tpl-'+item.type+'4form',{"item": item, "data": data})%>
    {{else}}
    <!-- 合并默认设置 -->
    <% item = _.merge({ value: item.defaultValue }, {
    labelCol: { xs: 12, sm: 3 },
    wrapperCol: { xs: 12 },
    value: _.result(data, item.name),
    colon: colon !== false,
    hideRequiredMark: hideRequiredMark === true
    }, item); %>
    <div id="formGroup-{{item.name}}" class="{{if item.hidden}} hidden{{/if}}  col-xs-{{item.wrapperCol.xs}} {{if item.wrapperCol.sm}}col-sm-{{item.wrapperCol.sm}}{{/if}}">
        {{if item.type==='hidden'}}
        <% if(!item.hiddenWhenNotExist || item.value) { %>
        <input type="hidden" name="{{item.name}}" value="{{item.value}}" />
        <% } %>
        {{else}}
        <div class="form-group">
            {{if layout === "vertical"}}
            <div class="plrw">
                <label for="txt{{item.name}}" class="control-label">
                    <span class="{{if item.required && hideRequiredMark !== true}}ace-form-item-required{{/if}}">{{item.label}}</span>
                </label>
                <%include('tpl-'+item.type+'4form',{"item": item, "data": data})%>
            </div>
            {{else}}
            {{if typeof item.label !== 'undefined'}}
            <label class="col-sm-{{item.labelCol.sm}} col-xs-{{item.labelCol.xs}} control-label no-padding-right {{if (item.type === 'radio' || item.type === 'checkbox' || item.type === 'switch') && !item.buttonGroup}}no-padding-top{{/if}}" for="txt{{item.name}}">
                <span class="{{if item.required && item.hideRequiredMark !== true}}ace-form-item-required{{/if}}{{if item.colon === false}} ace-form-item-no-colon{{/if}}">{{item.label}}</span>
            </label>
            <div class="col-sm-{{item.labelCol.sm === 12 ? 12 : (12 - item.labelCol.sm)}} col-xs-{{item.labelCol.xs === 12 ? 12 : (12 - item.labelCol.xs)}}">
                <%include('tpl-'+item.type+'4form',{"item": item, "data": data})%>
            </div>
            {{else}}
            <div>
                <%include('tpl-'+item.type+'4form',{"item": item, "data": data})%>
            </div>
            {{/if}}
            {{/if}}
        </div>
        {{/if}}
    </div>
    {{/if}}
</script>
<!-- 表单模版 -->
<script id="tpl-formInput" type="text/html">
    <div style="padding: 15px 35px 0 35px;">
        <form class="form-{{layout||'horizontal'}} clearfix" role="form">
            <div class="row">
                {{each items item i}}
                    <%include('tpl-formItem',_.merge({}, $data, { item: item, i: i}))%>
                {{/each}}
            </div>
        </form>
    </div>
</script>
